﻿
@{
    Layout = null; 
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <style>
         /*.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 ,
        .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
        .btn-group,#commissionBtn,#clone {
            border-style: solid;
            border-width: 1px;
            border-color: #000;
        }*/
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight"> 
        <div class="ibox-content" style="padding:15px;">
            <div class="col-sm-2" style="padding-left:0px;">
                <div class="btn-group">
                    @*<button id="insertBtn" type="button" class="btn btn-outline btn-default">
                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                    </button>
                    <button id="editBtn" type="button" class="btn btn-outline btn-default">
                        <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                    </button>
                    <button id="deleteBtn" type="button" class="btn btn-outline btn-default">
                        <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                    </button>*@
                    <button id="refreshBtn" type="button" class="btn btn-outline btn-default">
                        <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                    </button>
                </div> 
            </div>
            <table id="table" data-mobile-responsive="true"></table>
        </div>
        @* 用来传递消息的隐藏域 *@
        <input id="handle_status" value="" hidden="hidden">
    </div>


    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script type="text/javascript" src="~/Scripts/content.js?v=1.0.0"></script>
    <!-- Bootstrap table -->
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="~/Scripts/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
    <script src="~/Scripts/plugins/bootstrap-table/extensions/export/tableExport.jquery.plugin-master/tableExport.js"></script>

    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>

    <script type="text/javascript">
        $(function () {
            initTable();
        });
        var $table = $('#table');
        function initTable() {
            $table.bootstrapTable({
                url: '/FoundHouse/FoundHouse/IndexAsync',            //数据来源地址
                method: 'post',                     //数据请求方式
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否启用分页
                sidePagination: 'server',           //在服务器端分页
                queryParams: queryParams,           //传递参数
                pageNumber: 1,                      //初始化加载第一页，默认第一页
                pageSize: 20,                       //每页的记录行数（*）
                pageList: [10, 20, 30, 40, 50],     //可供选择的每页的行数（*）
                clickToSelect: true,                //是否启用点击选中行
                //toolbar: "#tableToolBar",
                height: getHeight(),
                search: true,
                showRefresh: true,
                showColumns: true,
                showExport: true,                     //是否显示导出
                exportDataType: "basic",              //basic', 'all', 'selected'.
                exportTypes: ['excel'],
                exportOptions: { fileName: '123' },
                toolbar: '#exampleToolbar',
                iconSize: 'outline',
                icons: {
                    refresh: 'glyphicon-repeat',
                    columns: 'glyphicon-list'
                },
                toolbar: '#exampleToolbar',
                columns: [{
                    width: 38,
                    field: 'selected',
                    checkbox: true,
                }, {
                    title: '行号',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) { return index + 1; }
                }, {
                    field: 'userName',
                    title: '经纪人',
                    align: 'center'
                }, {
                    field: 'areaID',
                    title: '地区',
                    align: 'center', 
                }, {
                    field: 'buildingName',
                    title: '楼盘小区',
                    align: 'center'
                }, {
                    field: 'use',
                    title: '用途',
                    align: 'center'
                }, {
                    field: 'houseType',
                    title: '房型',
                    align: 'center'
                }, {
                    field: 'minArea',
                    title: '最小面积',
                    align: 'center'
                }, {
                    field: 'maxArea',
                    title: '最大面积',
                    align: 'center'
                }, {
                    field: 'minPrice',
                    title: '最低价格',
                    align: 'center'
                }, {
                    field: 'maxPrice',
                    title: '最高价格',
                    align: 'center'
                }, {
                    field: 'remark',
                    title: '备注',
                    align: 'center'
                }, {
                    field: 'createTime',
                    title: '时间',
                    align: 'center'
                }, {
                    title: '回复',
                    align: 'center',
                    formatter: ReplyFormatter
                }, {
                    field: 'state',
                    title: '状态',
                    align: 'center'
                }]
            });
        }

        //查询的参数
        var queryParams = function (params) {
            var temp = {
                pageSize: params.limit,                             //行数
                pageIndex: (params.offset / params.limit) + 1,      //页码
                search: params.search,                       //查询内容 

            };
            console.info(temp);
            return temp;
        };

        //刷新表格数据
        var refreshTable = function () {
            $table.bootstrapTable('refresh');
        }

        //自定义的列事件
        function operateFormatter(value, row, index) {
            return [
                '<a class="edit" href="javascript:void(0)" title="编辑">',
                '<i class="glyphicon glyphicon-edit"></i>',
                '</a>  ',
                '<a class="remove" href="javascript:void(0)" title="删除">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }

        window.operateEvents = {
            'click .edit': function (e, value, row, index) {
                editData(row.id);
            },
            'click .remove': function (e, value, row, index) {
                Delete(row.id);
            }
        };


        function isTrueFormatter(value, row, index) {
            return value ? '<i class="glyphicon glyphicon-ok"></i>' : '<i class="glyphicon glyphicon-remove"></i>'
        }

        //获取表格高度
        function getHeight() {
            return $(window).height() - 150;
        }

        //重置表格高度
        setTimeout(function () {
            $table.bootstrapTable('resetView');
        }, 200);

        //重置表格高度
        $(window).resize(function () {
            $table.bootstrapTable('resetView', {
                height: getHeight()
            });
        });

        //刷新按钮
        $('#refreshBtn').click(function (e) {
            $table.bootstrapTable('refresh');
        });

        //搜索按钮
        $('#searchBtn').click(function (e) {
            $table.bootstrapTable('refresh');
        });
        //回复
        function ReplyFormatter(value, row, index) { 
            if (parseInt(row['replyCount']) == 0) {
                return [
                '<a class="recordpic" href="javascript:void(0)" onclick="ReplyeditData(' + row.id + ')"  title="回复信息个数">',
                '<i class="fa fa-odnoklassniki-square"></i>',
                '</a>  '
                ].join('');
            } else {
                return [
                '<a class="recordpic" href="javascript:void(0)" onclick="ReplyeditData(' + row.id + ')" title="回复信息个数">',
                '<i class="fa fa-odnoklassniki-square"></i>',
                '×' + row['replyCount'],
                '</a>  '
                ].join('');
            }
        }
        function ReplyeditData(FoundHouseRunningsID) {
            parent.layer.open({
                type: 2,
                title: "回复信息",
                shadeClose: false,
                shade: 0.4,
                area: ["1000px", "700px"], 
                content: "/FoundHouse/FoundHouse/ReplyIndex?FoundHouseRunningsID=" + FoundHouseRunningsID,
                end: function () {
                    refreshTable();
                }
            });
        } 
    </script>
</body>
</html>
